<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

    <link rel="stylesheet" href="../css/bootstrap-table.min.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

    <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <script src="../js/bootstrap-table.min.js"></script>
    <script src="../js/bootstrap-table-zh-CN.min.js"></script>
    <style>
        .chang {
            width: 40%;
            display: inline-block;
            text-align: right;
        }

        .dchang {
            width: 50%;
            display: inline-block;
        }

        .aa {
            display: inline-block;
            width: 50%;
        }

        .dropdownbox {
            width: 60%;
        }

        .ichang {
            width: 60%;
        }

        .d {
            margin-top: 3px;
        }
    </style>
</head>
<body>
<div class="row">
    <div class="col">
        请选择产品I级分类:
        <select id="one" class="form-control">
            <option value="">请选择</option>
            <option>电子</option>
        </select>
    </div>
    <div class="col">
        请选择产品II级分类:
        <select id="tow" class="form-control">
            <option value="">请选择</option>
            <option>计算机</option>
        </select>
    </div>
    <div class="col">
        请选择产品III级分类:
        <select id="throws" class="form-control">
            <option value="">请选择</option>
            <option>服务器</option>
        </select>
    </div>
    <div class="col">
        请选择产品用途类型:
        <select id="type" class="form-control">
            <option value="">请选择</option>
            <option value="y001-1">商品</option>
            <option value="y001-2">物料</option>
        </select>
    </div>
    <div class="col">
        查询是否删除:
        <select id="deleteTag" class="form-control">
            <option value="c001-0">未删除</option>
            <option value="c001-1">已删除</option>
        </select>
    </div>
    <div class="col">
        <button onclick="f()" class="btn btn-primary" style="margin-top: 21px">查询</button>
    </div>
</div>
<hr/>
<div>
    <table id="tab"></table>
</div>

<div class="modal fade" id="myModal">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">

            <!-- 模态框头部 -->
            <div class="modal-header">
                <h5 class="modal-title">产品变更</h5>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- 模态框主体 -->
            <div class="modal-body ">
                <div style="display: flex; flex-direction: column">
                    <!--主要信息-->
                    <div style="margin-top: 5px;" id="zy">
                        <div class="bg-info text-white" style="padding-left: 20px; height:25px;">主信息</div>
                        <!--                        <span id="q_productId" style="background-color: rgba(195, 195, 195, 0.61);float:left;width:80%;border-bottom: 1px solid white">s</span>-->
                        <div>
                            <div style="width: 50%; float: left;"><span
                                    style="background-color:deepskyblue;width: 40%;float: left;"><span
                                    style="color: red">*</span>产品名称</span><input type="text"
                                                                                 style="border:none;outline: none;background-color: rgba(195, 195, 195, 0.61);float:left;width:calc(100% - 40%);border-bottom: 1px solid white;height: 25px;"
                                                                                 id="add1"></div>
                            <div style="width: 50%; float: left;"><span
                                    style="background-color:deepskyblue;width: 40%;float: left;">制造商</span><input r
                                                                                                                  type="text"
                                                                                                                  style="border:none;outline: none;background-color: rgba(195, 195, 195, 0.61);float:left;width:calc(100% - 40%);border-bottom: 1px solid white;height: 25px;"
                                                                                                                  id="add2">
                            </div>
                        </div>
                        <div>
                            <div style="width: 50%; float: left;"><span
                                    style="background-color:deepskyblue;width: 40%;float: left;"><span
                                    style="color: red">*</span>一级分类</span><select id="add3"
                                                                                  style="border:none;outline: none;background-color: rgba(195, 195, 195, 0.61);float:left;width:calc(100% - 40%);border-bottom: 1px solid white;height: 25px;">
                                <option value="">请选择</option>
                                <option value="1">电子</option>
                            </select></div>
                            <div style="width: 50%; float: left;"><span
                                    style="background-color:deepskyblue;width: 40%;float: left;"><span
                                    style="color: red">*</span>二级分类</span><select id="add4"
                                                                                  style="border:none;outline: none;background-color: rgba(195, 195, 195, 0.61);float:left;width:calc(100% - 40%);border-bottom: 1px solid white;height: 25px;">
                                <option value="">请选择</option>
                                <option value="1">计算机</option>
                            </select></div>
                        </div>
                        <div>
                            <div style="width: 50%; float: left;"><span
                                    style="background-color:deepskyblue;width: 40%;float: left;"><span
                                    style="color: red">*</span>三级分类</span><select id="add5"
                                                                                  style="border:none;outline: none;background-color: rgba(195, 195, 195, 0.61);float:left;width:calc(100% - 40%);border-bottom: 1px solid white;height: 25px;">
                                <option value="">请选择</option>
                                <option value="1">服务器</option>
                            </select></div>
                            <div style="width: 50%; float: left;"><span
                                    style="background-color:deepskyblue;width: 40%;float: left;">产品简称</span><input
                                    type="text"
                                    style="border:none;outline: none;background-color: rgba(195, 195, 195, 0.61);float:left;width:calc(100% - 40%);border-bottom: 1px solid white;height: 25px;"
                                    id="add6"></div>
                        </div>
                        <div>
                            <div style="width: 50%; float: left;"><span
                                    style="background-color:deepskyblue;width: 40%;float: left;">用途类型</span><select
                                    id="add7"
                                    style="border:none;outline: none;background-color: rgba(195, 195, 195, 0.61);float:left;width:calc(100% - 40%);border-bottom: 1px solid white;height: 25px;">
                                <option value="">请选择</option>
                                <option value="y001-1">商品</option>
                                <option value="y001-2">物料</option>
                            </select></div>
                            <div style="width: 50%; float: left;"><span
                                    style="background-color:deepskyblue;width: 40%;float: left;">档次级别</span><select
                                    id="add8"
                                    style="border:none;outline: none;background-color: rgba(195, 195, 195, 0.61);float:left;width:calc(100% - 40%);border-bottom: 1px solid white;height: 25px;">
                                <option value="">请选择</option>
                                <option value="d001-1">高档</option>
                                <option value="d001-2">中档</option>
                                <option value="d001-3">低档</option>
                            </select></div>
                        </div>
                        <div>
                            <div style="width: 50%; float: left;"><span
                                    style="background-color:deepskyblue;width: 40%;float: left;">计量单位</span><input
                                    type="text"
                                    style="border:none;outline: none;background-color: rgba(195, 195, 195, 0.61);float:left;width:calc(100% - 40%);border-bottom: 1px solid white;height: 25px;"
                                    id="add9"></div>
                            <div style="width: 50%; float: left;"><span
                                    style="background-color:deepskyblue;width: 40%;float: left;">计量值</span><input
                                    type="text"
                                    style="border:none;outline: none;background-color: rgba(195, 195, 195, 0.61);float:left;width:calc(100% - 40%);border-bottom: 1px solid white;height: 25px;"
                                    id="add10"></div>
                        </div>
                        <div>
                            <div style="width: 50%; float: left;"><span
                                    style="background-color:deepskyblue;width: 40%;float: left;"><span
                                    style="color: red">*</span>市场单价(元)</span><input type="text"
                                                                                    style="border:none;outline: none;background-color: rgba(195, 195, 195, 0.61);float:left;width:calc(100% - 40%);border-bottom: 1px solid white;height: 25px;"
                                                                                    id="add11"></div>
                            <div style="width: 50%; float: left;"><span
                                    style="background-color:deepskyblue;width: 40%;float: left;"><span
                                    style="color: red">*</span>计划成本单价</span><input type="text"
                                                                                   style="border:none;outline: none;background-color: rgba(195, 195, 195, 0.61);float:left;width:calc(100% - 40%);border-bottom: 1px solid white;height: 25px;"
                                                                                   id="add12"></div>
                        </div>
                    </div>

                    <!--辅助信息-->
                    <div style="margin-top: 5px;" id="fz">
                        <div class="bg-info text-white" style="padding-left: 20px; height:25px;">辅助信息</div>
                        <div>
                            <div style="width: 50%; float: left;"><span
                                    style="background-color:deepskyblue;width: 40%;float: left;">保修期</span><input
                                    type="text"
                                    style="border:none;outline: none;background-color: rgba(195, 195, 195, 0.61);float:left;width:calc(100% - 40%);border-bottom: 1px solid white;height: 25px;"
                                    id="add13"></div>
                            <div style="width: 50%; float: left;"><span
                                    style="background-color:deepskyblue;width: 40%;float: left;">替代品名称</span><input
                                    type="text"
                                    style="border:none;outline: none;background-color: rgba(195, 195, 195, 0.61);float:left;width:calc(100% - 40%);border-bottom: 1px solid white;height: 25px;"
                                    id="add14"></div>
                        </div>
                        <div>
                            <div style="width: 50%; float: left;"><span
                                    style="background-color:deepskyblue;width: 40%;float: left;">替代品编号</span><input
                                    type="text"
                                    style="border:none;outline: none;background-color: rgba(195, 195, 195, 0.61);float:left;width:calc(100% - 40%);border-bottom: 1px solid white;height: 25px;"
                                    id="add15"></div>
                            <div style="width: 50%; float: left;"><span
                                    style="background-color:deepskyblue;width: 40%;float: left;">生命周期</span><input
                                    type="text"
                                    style="border:none;outline: none;background-color: rgba(195, 195, 195, 0.61);float:left;width:calc(100% - 40%);border-bottom: 1px solid white;height: 25px;"
                                    id="add16"></div>
                        </div>
                        <div>
                            <div style="width: 50%; float: left;"><span
                                    style="background-color:deepskyblue;width: 40%;float: left;">单位</span><input
                                    type="text"
                                    style="border:none;outline: none;background-color: rgba(195, 195, 195, 0.61);float:left;width:calc(100% - 40%);border-bottom: 1px solid white;height: 25px;"
                                    id="add17"></div>
                            <div style="width: 50%; float: left;"><span
                                    style="background-color:deepskyblue;width: 40%;float: left;">产品经理:</span><input
                                    type="text"
                                    style="border:none;outline: none;background-color: rgba(195, 195, 195, 0.61);float:left;width:calc(100% - 40%);border-bottom: 1px solid white;height: 25px;"
                                    id="add18"></div>
                        </div>
                        <div>
                            <div style="width: 50%; float: left;"><span
                                    style="background-color:deepskyblue;width: 40%;float: left;">供应商集合</span><input
                                    type="text"
                                    style="border:none;outline: none;background-color: rgba(195, 195, 195, 0.61);float:left;width:calc(100% - 40%);border-bottom: 1px solid white;height: 25px;"
                                    id="add19"></div>
                            <div style="width: 50%; float: left;"><span
                                    style="background-color:deepskyblue;width: 40%;float: left;">产品描述</span><input
                                    type="text"
                                    style="border:none;outline: none;background-color: rgba(195, 195, 195, 0.61);float:left;width:calc(100% - 40%);border-bottom: 1px solid white;height: 25px;"
                                    id="add20"></div>
                        </div>
                        <div>
                            <div style="width: 50%; float: left;"><span
                                    style="background-color:deepskyblue;width: 40%;float: left;">变更人</span><input
                                    type="text"
                                    style="border:none;outline: none;background-color: rgba(195, 195, 195, 0.61);float:left;width:calc(100% - 40%);border-bottom: 1px solid white;height: 25px;"
                                    id="add21"></div>
                            <div style="width: 50%; float: left;"><span
                                    style="background-color:deepskyblue;width: 40%;float: left;">变更时间</span><input
                                    type="text"
                                    style="border:none;outline: none;background-color: rgba(195, 195, 195, 0.61);float:left;width:calc(100% - 40%);border-bottom: 1px solid white;height: 25px;"
                                    id="y"></div>
                        </div>
                        <input type="hidden" id="dfileid"><input type="hidden" id="fileChangeAmount">
                    </div>

                </div>
            </div>

            <!-- 模态框底部 -->
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="update()">提交</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
            </div>

        </div>
    </div>
</div>
<script>
    $(function () {
        $("#tab").bootstrapTable({
            //请求方式  get请求中文会乱码，建议使用post请求
            method: 'post',
            //请求头部的设置
            contentType: 'application/json',
            //url
            url: '/designModule/Dfile',
            //设置交替行样式
            striped: true,
            //初始显示页号
            pageNumber: 1,
            //是否显示分页
            pagination: true,
            //设置是服务端分页还是客户端分页
            sidePagination: 'server',
            //页大小
            pageSize: 5,
            //分页列表
            pageList: [3, 5, 6, 10],
            //上传到服务端的参数
            queryParams: function (params) {
                return {
                    // 计算页号(当前页)
                    pageNumber: (params.offset / params.limit) + 1,
                    // 计算页大小
                    pageSize: params.limit,
                    querySearch: {
                        firstKindName: $("#one").val(),
                        secondKindName: $("#tow").val(),
                        thirdKindName: $("#throws").val(),
                        type: $("#type").val(),
                        deleteTag: $("#deleteTag").val()
                    }

                };
            },
            // 定义列名
            columns: [
                {title: '产品编号', field: 'productId', align: 'center'},
                {title: '产品名称', field: 'productName', align: 'center'},
                {
                    title: '档次级别', field: 'productClass', align: 'center',
                    formatter: function (value, row, index) {
                        if (value == "d001-1") {
                            return "高档";
                        } else if (value = "d001-2") {
                            return "中档"
                        } else {
                            return "低档"
                        }
                    }
                },
                {title: 'I级分类', field: 'firstKindName', align: 'center'},
                {title: 'II级分类', field: 'secondKindName', align: 'center'},
                {title: 'III级分类', field: 'thirdKindName', align: 'center'},
                {
                    title: '用途类型', field: 'type', align: 'center',
                    formatter: function (value, row, index) {
                        return value == "y001-1" ? "商品" : "物料"
                    }
                },
                {
                    title: '审核结果', field: 'checkTag', align: 'center',
                    formatter: function (value, row, index) {
                        if (value == "s001-2") {
                            return "审核不通过";
                        } else if (value == "s001-1") {
                            return "审核通过"
                        } else {
                            return "未审核"
                        }
                    }
                },
                {
                    title: '操作', field: 'deleteTag', align: 'center',
                    formatter: function (value, row, index) {
                        if (value == "c001-1") {
                            var btn1 = "<button class=\"btn btn-warning  btn-sm\" onclick=\"recover(" + row.id + ")\">恢复</button>";
                            var btn2 = "<button class=\"btn btn-warning  btn-sm\" onclick=\"deleteCompletely(" + row.id + ")\">彻底删除</button>";

                        } else {
                            var btn1 = "<button class=\"btn btn-primary  btn-sm\"  data-target='#myModal' onclick='givevalue(" + JSON.stringify(row) + ",this)'>更新</button>";
                            var btn2 = "<button class=\"btn btn-warning  btn-sm\" onclick=\"remove(" + row.id + ",this)\">删除</button>";
                        }

                        return btn1 + "&emsp;" + btn2;
                    }
                }
            ]
        })

    })

    function f() {
        $("#tab").bootstrapTable("refresh");
    }

    $(function () {
        $.ajax({
            type: 'POST',
            url: '/designModule/queryadmin',
            contentType: 'application/json;charset=utf-8',
            success: function (data) {
                $("#add21").val(data.loginId)
            }
        })
    })

    function remove(id,ss) {
        if ($(ss).parent().prev().text() == '审核通过'){
            alert("审核同不能删除");
        }else{
            $.ajax({
                type: 'POST',
                url: '/designModule/remove',
                data: 'id=' + id,
                success: function () {
                    $("#tab").bootstrapTable("refresh");
                }
            })
        }

    }

    function deleteCompletely(id) {
        $.ajax({
            type: 'POST',
            url: '/designModule/deleteCompletely',
            data: 'id=' + id,
            success: function () {
                $("#tab").bootstrapTable("refresh");
            }
        })
    }

    function recover(id) {
        $.ajax({
            type: 'POST',
            url: '/designModule/recover',
            data: 'id=' + id,
            success: function () {
                $("#tab").bootstrapTable("refresh");
            }
        })
    }

    var alltime;
    var rowall;

    function givevalue(row, ss) {
        if ($(ss).parent().prev().text() == '审核通过') {
            alert("审核通过后不能修改");
            $("#myModal").modal("hide");
        }else{
            var now = new Date().toLocaleString();
            alltime = now;
            $("#y").val(now);
            rowall = row;
            $("#dfileid").val(row.id);
            $("#add1").val(row.productName);
            $("#add2").val(row.factoryName);
            $("#add3").val(row.firstKindId);
            $("#add4").val(row.secondKindId);
            $("#add5").val(row.thirdKindId);
            $("#add6").val(row.productNick);
            $("#add7").val(row.type);
            $("#add8").val(row.productClass);
            $("#add9").val(row.personalUnit);
            $("#add10").val(row.personalValue);
            $("#add11").val(row.listPrice);
            $("#add12").val(row.costPrice);
            $("#add13").val(row.warranty);
            $("#add14").val(row.twinName);
            $("#add15").val(row.twinId);
            $("#add16").val(row.lifecycle);
            $("#add17").val(row.amountUnit);
            $("#add18").val(row.responsiblePerson);
            $("#add19").val(row.providerGroup);
            $("#add20").val(row.productDescribe);
            if (row.fileChangeAmount != null && row.fileChangeAmount >= 1) {
                $("#fileChangeAmount").val(row.fileChangeAmount + 1);
            } else {
                $("#fileChangeAmount").val(1)
            }
            $("#myModal").modal("show");
        }

    }

    function update() {
        let dfile
        if ($("#add11").val() != rowall.listPrice || $("#add12").val() != rowall.costPrice) {
            dfile = {
                id: $("#dfileid").val(),
                productName: $("#add1").val(),
                factoryName: $("#add2").val(),
                firstKindId: $("#add3").val(),
                firstKindName: $("#add3").find("option:selected").text(),
                secondKindId: $("#add4").val(),
                secondKindName: $("#add4").find("option:selected").text(),
                thirdKindId: $("#add5").val(),
                thirdKindName: $("#add5").find("option:selected").text(),
                productNick: $("#add6").val(),
                type: $("#add7").val(),
                productClass: $("#add8").val(),
                personalUnit: $("#add9").val(),
                personalValue: $("#add10").val(),
                listPrice: $("#add11").val(),
                costPrice: $("#add12").val(),
                realCostPrice: $("#add12").val(),
                warranty: $("#add13").val(),
                twinName: $("#add14").val(),
                twinId: $("#add15").val(),
                lifecycle: $("#add16").val(),
                amountUnit: $("#add17").val(),
                responsiblePerson: $("#add18").val(),
                providerGroup: $("#add19").val(),
                productDescribe: $("#add20").val(),
                changer: $("#add21").val(),
                changeTime: alltime,
                changeTag: 'j001-1',
                fileChangeAmount: $("#fileChangeAmount").val(),
            }
        } else {
            dfile = {
                id: $("#dfileid").val(),
                productName: $("#add1").val(),
                factoryName: $("#add2").val(),
                firstKindId: $("#add3").val(),
                firstKindName: $("#add3").find("option:selected").text(),
                secondKindId: $("#add4").val(),
                secondKindName: $("#add4").find("option:selected").text(),
                thirdKindId: $("#add5").val(),
                thirdKindName: $("#add5").find("option:selected").text(),
                productNick: $("#add6").val(),
                type: $("#add7").val(),
                productClass: $("#add8").val(),
                personalUnit: $("#add9").val(),
                personalValue: $("#add10").val(),
                listPrice: $("#add11").val(),
                costPrice: $("#add12").val(),
                realCostPrice: $("#add12").val(),
                warranty: $("#add13").val(),
                twinName: $("#add14").val(),
                twinId: $("#add15").val(),
                lifecycle: $("#add16").val(),
                amountUnit: $("#add17").val(),
                responsiblePerson: $("#add18").val(),
                providerGroup: $("#add19").val(),
                productDescribe: $("#add20").val(),
                changer: $("#add21").val(),
                changeTime: alltime,
                fileChangeAmount: $("#fileChangeAmount").val(),
            }
        }
        let d = JSON.stringify(dfile);
        if ($("#add1").val() != null && $("#add1").val() != "" && $("#add3").val() != null && $("#add3").val() != "" && $("#add4").val() != null && $("#add4").val() != "" && $("#add5").val() != null && $("#add5").val() != "" && $("#add11").val() != null && $("#add11").val() != "" && $("#add12").val() != null && $("#add12").val() != "") {
            $.ajax({
                type: 'POST',
                url: '/designModule/update',
                contentType: 'application/json;charset=utf-8',
                data: d,
                success: function () {
                    $("#tab").bootstrapTable("refresh");
                }
            })
            $("#myModal").modal("hide");//隐藏div
        } else {
            alert("有*的不能为空")
        }
    }
</script>
</body>
</html>